<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.roadId" clearable placeholder="选择路线" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" clearable placeholder="选择标段">
        <el-option
          v-for="item in bidSectionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <div class="change-type">
        <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small" v-if="!isNotSuper">新增抽查表单</el-button>
      </div>
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="roadName" show-overflow-tooltip min-width="100" label="路线名称"></el-table-column>
        <el-table-column prop="roadSectionName" show-overflow-tooltip min-width="100" label="标段名称"></el-table-column>
        <el-table-column prop="beCheckedUnitName" show-overflow-tooltip min-width="120" label="被检单位"></el-table-column>
        <el-table-column prop="checkUnitName" min-width="100" show-overflow-tooltip label="抽查单位"></el-table-column>
        <el-table-column prop="checkUserName" min-width="100" show-overflow-tooltip label="抽查人"></el-table-column>
        <el-table-column prop="checkTime" width="120" label="抽查日期">
          <template slot-scope="scope">{{scope.row.checkTime | formatTimer2}}</template>
        </el-table-column>
        <el-table-column prop="score" min-width="55"  label="评分"></el-table-column>
        <el-table-column prop="checkLevel" min-width="60" label="评级">
          <template slot-scope="scope">
            <el-tag class="temp-tag" :type="scope.row.checkLevel | gradeCheckLevelColor">{{scope.row.checkLevel}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="checkStatusName" min-width="100" label="核查状态">
          <template slot-scope="scope">
            <el-tag effect="plain" :type="scope.row.checkStatusName | gradeCheckColor">{{ scope.row.checkStatusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="investigateTime" width="100" label="整改通知">
          <template slot-scope="scope">
            <el-badge :is-dot="scope.row.receiveType === 0" class="item"
                      v-if="scope.row.receiveType !== 2">
              <el-button class="share-button" @click="lookRectification(scope.row.id)"
                         type="primary">查看
              </el-button>
            </el-badge>
            <p v-else>无</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="200">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleRecord(scope.row)">操作记录</button>
            <button class="btn_edit" @click="lookDetail(scope.row)">查看评分</button>

            <el-tooltip class="item" effect="dark" :content="isApplyIng(scope.row.checkStatus)" placement="top-start" v-if="!isNotSuper">
              <button class="btn_edit0616" @click="handleCheck(scope.row)" v-if="scope.row.checkStatus === 5">销号审批</button>
              <button class="btn_edit0616" @click="lookFile(scope.row)" v-if="scope.row.checkStatus === 7">查看文件</button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" :content="isApprovalIng(scope.row.checkStatus)"  placement="top-start" v-else>
              <button class="btn_edit0616" @click="handleCheck(scope.row)" v-if="applyShow(scope.row.checkStatus)">销号申请</button>
            </el-tooltip>
            <button class="btn_edit0615" @click="handleRectification(scope.row)" v-if="!isNotSuper && scope.row.checkStatus!==7">下发整改通知单</button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <el-dialog title="操作记录"
               :visible.sync="showGeologyRecord"
               :close-on-click-modal="false"
               @open="init"
               :close-on-press-escape="false" width="200px">
      <investigate-operation ref="operation" :id="this.investigateId"></investigate-operation>
    </el-dialog>
    <el-dialog title="新增抽查表单"
               :visible.sync="showNotice"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="920px">
      <form-base v-model="currentRow" ref="formBase" :roadList2="roadList"></form-base>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="showNotice = false">取消</el-button>
         <el-popconfirm title="确认提交评分吗？" @confirm="validatorForm('formBase')" style="margin-left: 20px">
              <el-button slot="reference" type="primary">确定</el-button>
         </el-popconfirm>
      </span>
    </el-dialog>
    <el-dialog title="查看整改通知单"
               :visible.sync="showRectificationList"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="200px">
      <el-card shadow="always" class="rectification-list" v-for="item in rectificationNoticeList" :key="item.id">
        <p><i class="el-icon-s-help"
              style="margin-right: 10px"></i>整改截止时间：<span>{{item.rectificationTime|formatTimer2}}</span>
        </p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>整改建议：<span>{{item.advice}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查单位：<span>{{item.checkUnitName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查人：<span>{{item.checkUserName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>签收状态：<span>{{item.receiveTypeName}}</span></p>
        <div class="qianshou" v-if="item.receiveTypeName === '未签收' && isNotSuper">
          <el-button class="common_btn-defalut" type="primary" size="mini"
                     @click="signForRectification(item.id)">签收
          </el-button>
        </div>
      </el-card>
    </el-dialog>
    <el-dialog title="下发整改通知单"
               :visible.sync="showRectificationNotice"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="200px">
      <form-rectification v-model="rectification" ref="rectification"></form-rectification>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="showRectificationNotice = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitRectification">确定</el-button>
      </span>
    </el-dialog>
    <!-- 销号 -->
    <el-dialog title="抽查销号"
               :visible.sync="showCheck"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="750px">
      <spot-check-cancel v-model="currentRow" ref="formCancel" :model="applyOrCancel"></spot-check-cancel>
      <p class="button-submit" v-if="currentRow.checkStatus !== 7">
        <el-button size="medium" @click="showCheck = false" style="margin-right: 20px">取消</el-button>
        <el-popconfirm title="确认驳回申请吗？" @confirm="submitReject" v-if="!isNotSuper">
          <el-button class="btn_edit1640" slot="reference" size="medium" type="primary">驳回</el-button>
        </el-popconfirm>
        <el-popconfirm :title="isNotSuper?'确定提交申请吗？':'确认进行销号吗？'" @confirm="validatorForm2('formCancel')">
          <el-button slot="reference" size="medium" type="primary">{{applyOrCancel}}</el-button>
        </el-popconfirm>
      </p>
    </el-dialog>
    <el-dialog title="查看抽查表单"
               :visible.sync="showDetail"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="920px">
      <form-detail :data="currentRow"></form-detail>
    </el-dialog>
  </div>
</template>

<script>
import ItemMixins from "../modules/item.mixins";
import InvestigateOperation from '../modules/investigate-operation'
import {
  getRanDomCheckList,
  addRanDomCheck,
  applyRanDomCheck,
  cancelRanDomCheck,
} from '@/services/model/inspect';
import {
  getRectificationNoticeByInvestigateId,
  receiveRectificationNotice,
  addRectificationNotice,
} from '@/services/model/investigation'
import FormBase from "./modules/form-base";
import FormDetail from "./modules/form-detail";
import SpotCheckCancel from "./modules/form-spot-check-cancel";
import FormRectification from "../modules/form-rectification";

export default {
  components: {FormBase, InvestigateOperation, FormRectification, FormDetail, SpotCheckCancel},
  mixins: [ItemMixins],
  data() {
    return {
      currentRow: {},
      showNotice: false,
      showGeologyRecord: false,
      showRectificationList: false,
      showRectificationNotice: false,
      showCheck: false,
      showDetail: false,
      inspectedUnitList: [],
      form: {
        page: 1,
        pageSize: 10,
        roadSectionId: ''
      },
      tableList: [],
      investigateId: '',
      rectification: {},
      rectificationNoticeList: []
    }
  },
  watch: {},
  computed: {
    // 只有监理单位和施工单位可以签收通知单
    isNotSuper() {
      return this.$store.state.userInfo.unitType === 5 || this.$store.state.userInfo.unitType === 6
    },
    applyOrCancel() {
      return this.$store.state.userInfo.unitType === 2 ? '销号' : '申请'
    },
  },
  methods: {
    //只有整改中 和 整改超时  驳回展示 销号申请按钮
    applyShow(status) {
      return status === 4 || status === 8 || status === 6
    },
    isApprovalIng(status) {
      return status == 5 ? '销号申请中' : "填写申请表单"
    },
    isApplyIng(status) {
      switch (status) {
        case 5:
          return '点击审批'
        case 7:
          return '查看整改说明'
        default:
          return "没有申请记录"
      }
    },
    lookDetail(row) {
      for (let i = 0; i < this.itemList.length; i++) {
        if (this.itemList[i].code === row.itemList[i].code) {
          this.itemList[i].score = row.itemList[i].score
        }
      }
      this.currentRow = row
      this.currentRow.itemList = this.itemList
      this.showDetail = true
    },
    // 审批驳回
    async submitReject() {
      this.currentRow.checkStatus = 6
      let res = await cancelRanDomCheck(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '驳回成功'
        })
        this.showCheck = false
        this.queryList()
      }
    },
    //审批通过 或 申请销号
    async submitCheck() {
      let action = ''
      if (this.isNotSuper) {
        action = applyRanDomCheck
      } else {
        action = cancelRanDomCheck
        this.currentRow.checkStatus = 7
      }
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.applyOrCancel === '申请' ? '申请成功' : '销号成功'
        })
        this.showCheck = false
        this.queryList()
      }
    },
    lookFile(row){
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showCheck = true
    },
    handleCheck(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showCheck = true
    },
    //签收整改通知单
    async signForRectification(id) {
      await receiveRectificationNotice({id: id})
      this.showRectificationList = false
      this.queryList();
    },
    //查看操作记录时间线
    handleRecord(row) {
      this.showGeologyRecord = true
      this.investigateId = row.id
    },
    //获取整改通知单
    async lookRectification(id) {
      let {data} = await getRectificationNoticeByInvestigateId({id: id})
      this.rectificationNoticeList = data || []
      this.showRectificationList = true
    },
    //提交整改通知单
    async submitRectification() {
      await addRectificationNotice(this.rectification)
      this.showRectificationNotice = false
      this.queryList()
    },
    //下发整改通知单
    handleRectification(row) {
      this.showRectificationNotice = true
      this.investigateId = row.id
      this.rectification = {
        investigateId: row.id,
        orderType: 3
      }
    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.investigateId)
      })
    },
    handleAdd() {
      this.currentRow = {}
      this.$nextTick(() => {
        this.$refs.formBase.$refs.form.clearValidate()
      })
      this.currentRow.itemList = this.itemList
      this.currentRow.userName = this.$store.state.userInfo.userName
      this.currentRow.unitName = this.$store.state.userInfo.unitName
      this.showNotice = true
    },
    async queryList() {
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await getRanDomCheckList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    async submit() {
      let res = await addRanDomCheck(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功'
        })
        this.showNotice = false
        this.queryList()
      }
    },
    // 审批表单校验
    validatorForm2(name) {
      if (name) {
        this.$refs[name]._validatorForm().then((res) => {
          this.submitCheck()
        })
      }
    },
    // 表单校验
    validatorForm(name) {
      if (name) {
        this.$refs[name]._validatorForm().then((res) => {
          this.submit()
        })
      }
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
    changeRoadSection() {
      this.$set(this.currentRow, 'slopeId', '');
      this.slopeList = []
      const {roadSectionId} = this.currentRow
      this.getRoadSectionInfo(roadSectionId)
    },
    //获取标段详情，读取关联的 监理单位，建设单位，施工单位
    async getRoadSectionInfo() {
      let res = await getRoadSectionInfo({id: this.currentRow.roadSectionId})
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
  },
  created() {
    this.getRoadList();
  },
  mounted() {
    this.queryList()
  },
}
</script>
<style lang="less">
  .rectification-list {
    font-size: 16px;
    line-height: 25px;

    span {
      font-size: 15px;
      color: gray;
    }
  }

  .el-popconfirm {
    .el-button--text {
      color: red !important;
    }
  }

  .s-white {
    color: #FFFFFF;
  }

  .father-box {
    margin-left: 20px;

    /deep/ .el-checkbox__label {
      width: 140px;
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: 16px;
      margin-top: 6px;
    }

    /deep/ .el-checkbox {
      width: 170px;
      line-height: 38px;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .item-children {
    margin-top: 20px;

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-tabs__item {
      font-size: 20px;
    }

    /deep/ .el-checkbox__label {
      font-size: 18px;
      line-height: 35px;
    }

    /deep/ .el-checkbox {
      display: block;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #e0e0e0;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }


  .item {
    margin-top: 10px;
    margin-right: 40px;

    .el-button {
      padding: 5px 5px;
      margin-right: 0px !important;
      margin-bottom: 10px;
      min-width: 25px;
      height: 25px;
    }
  }

  .temp-tag {
    font-size: 15px;
    font-weight: 600;
  }

  .btn_edit0615 {
    font-size: 14px;
    color: #ff6c03;
  }

  .btn_edit0616 {
    color: rgba(222, 48, 49, 1);
  }

  .btn_edit1640 {
    background-color: rgba(222, 48, 49, 1);
    margin-right: 20px;
    border: none;
  }

  .qianshou {
    float: right;
    margin-right: 20px;
    margin-bottom: 5px;

    span {
      color: white !important;
    }

    .common_btn-defalut {
      padding: 5px 10px !important;
    }
  }

  .button-submit {
    text-align: right;
    margin-bottom: 5px;
  }

</style>
